<template>
  <div>
    <!-- 顶部栏 -->
    <div class="header">
      <van-image
        class="avatar"
        round
        width="2.5rem"
        height="2.5rem"
        fit="cover"
        :src="userInfo.photo"
      />
      <div class="info">
        <h5>{{ userInfo.name }}</h5>
        <div class="birth">{{ userInfo.birthday }}</div>
      </div>
    </div>

    <!-- 工具区域 -->
    <van-row>
      <van-col span="8">
        <van-icon name="newspaper-o" />
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon name="star-o" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon name="tosend" />
        <span>阅读历史</span>
      </van-col>
    </van-row>

    <!-- 功能区域 -->
    <van-cell to="/my/edit" title="编辑资料" icon="edit" is-link />
    <van-cell title="小智同学" icon="chat-o" is-link />
    <van-cell title="系统设置" icon="setting-o" is-link />
    <van-cell @click="logout" title="退出登录" icon="info-o" is-link />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    logout() {
      // 退出如果只是直接跳转到登录，不算退出
      // 真的退出要把token删掉才算退出
      // token存在两个地方：vuex,localStorage
      // 都要删
      this.$store.commit("removeToken");
      // 弹出提示说退出成功
      this.$toast.success("退出成功！");
      // 跳转到登录页
      this.$router.push("/login");
    },
  },

  async created() {
    if (!this.userInfo.name) {
      // 发请求
      let res = await this.$axios({
        url: "/v1_0/user/profile",
      });

      // 把数据存到vuex里
      this.$store.commit("setUserInfo", res.data.data);
    }
  },

  // 利用计算属性缩短vuex属性的访问
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style scoped>
.header {
  background-color: #3296fa;
  height: 160px;
  display: flex;
  align-items: center;
}

.avatar {
  margin-left: 20px;
  margin-right: 10px;
}

.info {
  color: #fff;
}

.birth {
  background-color: #fff;
  color: #3296fa;
  margin-top: 10px;
  padding: 3px 1px;
}

.van-col {
  height: 90px;
  display: flex;
  /* 修改flex的主轴放行，为y轴 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.van-icon-newspaper-o {
  color: #8dbdff;
  font-size: 28px !important;
  margin-bottom: 5px;
}

.van-icon-star-o {
  color: #ff5220;
  font-size: 28px !important;
  margin-bottom: 5px;
}

.van-icon-tosend {
  color: #ffb750;
  font-size: 28px !important;
  margin-bottom: 5px;
}
</style>